<template>
  <BasicModal
    v-bind="$attrs"
    @register="registerModal"
    :minHeight="100"
    :width="1200"
    :title="getTitle"
    :showOkBtn="descData.status !== 2"
    @ok="handleSubmit"
  >
    <!-- <a-select
      ref="select"
      mode="multiple"
      v-model:value="roles"
      style="width: 100%"
      :options="roleList"
    >

    </a-select> -->
    <Description
      v-if="descData.name"
      size="middle"
      title=""
      :bordered="false"
      :column="2"
      :data="descData"
      :schema="refundSchema"
    />
    <h3>处理详情</h3>
    <a-row>
      <a-col style="color: rgba(255, 255, 255, 0.65)" span="12">
        <div class="flex">
          <label style="width: 120px; text-align: right"> 处理人：</label
          ><span>{{ descData.handler || '--' }}</span>
        </div>
      </a-col>
      <a-col style="color: rgba(255, 255, 255, 0.65)" span="12">
        <div class="flex">
          <label style="width: 120px; text-align: right">处理时间：</label>
          <span>
            {{
              descData.handler_time ? formatToDateTime(descData.handler_time * 1000) : '--'
            }}</span
          >
        </div>
      </a-col>
      <a-col style="color: rgba(255, 255, 255, 0.65)" span="24">
        <div class="flex m-2">
          <span style="width: 134px; color: rgba(255, 255, 255, 0.65); text-align: right">
            处理意见：</span
          >
          <InputTextArea
            placeholder="处理意见"
            :disabled="descData.status === 2"
            v-model:value="sendValue"
          />
        </div>
      </a-col>
    </a-row>
  </BasicModal>
</template>
<script lang="ts">
  import { defineComponent, ref, computed, unref, h } from 'vue';
  // import { useMessage } from '/@/hooks/web/useMessage';
  import { BasicModal, useModalInner } from '/@/components/Modal';
  // import { postUsers, putUsers } from '/@/api/sys/user';
  // const { createMessage } = useMessage();
  import {
    bindUserRoles,
    getRoleList,
    getUserRole,
    handlePatrolItem,
    RoleItem,
  } from '/@/api/sys/user';
  import { useMessage } from '/@/hooks/web/useMessage';
  // import { useUserStoreWithOut } from '/@/store/modules/user';
  import { Col, Input, Row } from 'ant-design-vue';
  import { DescItem } from '/@/components/Description';
  import { Description } from '/@/components/Description/index';
  import { ImagePreview } from '/@/components/Preview';
  import { useUserStoreWithOut } from '/@/store/modules/user';
  import { formatToDateTime } from '/@/utils/dateUtil';

  export default defineComponent({
    name: 'AccountModal',
    components: { BasicModal, Description, ARow: Row, ACol: Col, InputTextArea: Input.TextArea },
    emits: ['success', 'register'],
    setup(_, { emit }) {
      const refundSchema: DescItem[] = [
        {
          field: 'name',
          label: '标题',
          span: 24,
        },
        {
          field: 'account_name',
          label: '巡护员',
        },
        {
          field: 'happen_addr',
          label: '发生位置',
        },
        {
          field: 'happen_time',
          label: '发生时间',
          render: (val) => {
            if (val) {
              return formatToDateTime(val * 1000);
            }
          },
        },
        {
          field: 'date',
          label: '巡护时间',
        },
        {
          field: 'descr',
          label: '描述',
        },
        {
          field: 'creat_time',
          label: '上报时间',
          render: (val) => {
            if (val) {
              return formatToDateTime(val * 1000);
            }
          },
        },
        {
          field: 'images',
          label: '巡护图片',
          span: 24,
          render: (val) =>
            h(ImagePreview, { imageList: val.map((v) => ({ width: 120, src: `/${v}` })) }),
        },
      ];
      const isUpdate = ref(true);
      const sendValue = ref('');
      let userId = 0;
      const descData = ref({});
      // let oldUserName: string;
      const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
        descData.value = data.data;
        sendValue.value = data.data.handler_descr;
        console.log(descData.value);
        userId = data.data.id;
        setModalProps({ confirmLoading: false });
        // isUpdate.value = !!data?.isUpdate;
        // fetchConfig();
        // if (unref(isUpdate)) {
        //   // oldUserName = data.record.username;
        // }
      });

      const userStore = useUserStoreWithOut();

      // const userStore = useUserStoreWithOut();

      const getTitle = computed(() => '巡护详情');
      const { createMessage } = useMessage();
      async function handleSubmit() {
        // console.log(userId, roles);
        if (!sendValue.value) {
          createMessage.info('请输入处理意见');
          return;
        }
        handlePatrolItem(userId, userStore.getUserInfo.name, sendValue.value).then(() => {
          closeModal();
          createMessage.success('处理成功！');
          emit('success', true);
        });
      }

      const roles = ref<number[]>([]);
      const roleList = ref<RoleItem[]>([]);

      function fetchConfig() {
        getUserRole(userId).then((res) => {
          roles.value = res.map((v) => (v as any).role_id);
        });
      }
      getRoleList().then((res) => {
        roleList.value = res.map((v) => ({ ...v, label: v.name, value: v.id }));
      });

      return {
        registerModal,
        getTitle,
        handleSubmit,
        roles,
        roleList,
        refundSchema,
        descData,
        sendValue,
        formatToDateTime,
      };
    },
  });
</script>
